<datascroller-demos></datascroller-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataScroller - <span class="subitem">Inline</span></span>
        <span>DataScroller can listen scroll event of itself rather than document in inline mode.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataScroller [value]="cars" [rows]="10" [inline]="true" scrollHeight="500px">
        <p-header>
            Scroll Down to to Load More
        </p-header>
        <ng-template let-car pTemplate="item">
            <div class="ui-g car-item">
                <div class="ui-g-12 ui-md-3">
                    <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
                </div>
                <div class="ui-g-12 ui-md-9">
                    <div class="ui-g">
                        <div class="ui-g-2 ui-sm-6">Vin: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.vin}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Year: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.year}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Brand: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.brand}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Color: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.color}}</div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataScroller>
</div>

<div class="content-section documentation">    
    <p-tabView effect="fade">
        <p-tabPanel header="datascrollerinlinedemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datascroller/datascrollerinlinedemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataScrollerInlineDemo implements OnInit &#123;

    cars: Car[];
    
    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datascrollerinlinedemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datascroller/datascrollerinlinedemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [rows]="10" [inline]="true" scrollHeight="500px"&gt;
    &lt;p-header&gt;
        Scroll Down to to Load More
    &lt;/p-header&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div class="ui-g car-item"&gt;
            &lt;div class="ui-g-12 ui-md-3"&gt;
                &lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.brand&#125;&#125;.png"&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-12 ui-md-9"&gt;
                &lt;div class="ui-g"&gt;
                    &lt;div class="ui-g-2 ui-sm-6"&gt;Vin: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.vin&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Year: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.year&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Brand: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.brand&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Color: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.color&#125;&#125;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>